 <#import "inc/macro-page.html" as panel>
<#import "macro-filter-card-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "人才队伍趋势预警" "">
</@panel.header>
<@panel.body>
 <style>
     /* 添加以下CSS样式 */
     .el-table {
         /* 确保表格容器正确计算宽度 */
         width: 100%;
         overflow: hidden;
     }

     .el-table__body-wrapper {
         /* 移除之前的overflow-y和overflow-x设置 */
         overflow: auto !important; /* 使用auto替代具体的scroll和auto */

         /* 处理滚动条导致的偏移 */
         scrollbar-gutter: stable; /* 为滚动条预留空间 */
     }

     /* 确保表头和内容对齐 */
     .el-table__header-wrapper,
     .el-table__body-wrapper {
         width: 100% !important;
     }

     /* 处理表格边框 */
     .el-table__body {
         width: 100% !important;
         border-spacing: 0;
     }

     /* 如果需要的话，可以添加以下样式来美化滚动条 */
     .el-table__body-wrapper::-webkit-scrollbar {
         width: 8px;
         height: 8px;
     }

     .el-table__body-wrapper::-webkit-scrollbar-thumb {
         background: #dcdfe6;
         border-radius: 4px;
     }

     .el-table__body-wrapper::-webkit-scrollbar-track {
         background: #f5f7fa;
     }
 </style>
            <!-- Bread crumb -->
            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3>人才队伍趋势预警</h3> </div>
                <div class="col-md-7 align-self-center">
                    <div class="page-nav-bar">
                       <button class="btn btn-info btn-click-bind" data-sign="11">专家人才晋升趋势</button>
                       <button class="btn btn-info btn-click-bind" data-sign="12">职称等级晋升趋势</button>
                       <button class="btn btn-info btn-click-bind" data-sign="13">技能等级晋升趋势</button>
                       <button class="btn btn-inverse btn-click-bind" data-sign="14" disabled>人才信息定向筛选</button>
                    </div>
                </div>
            </div>
            <!-- End Bread crumb -->
            <!-- Container fluid  -->
            <div class="container-fluid" id="ceshi_div" style="height: 867px">
                <!-- Start Page Content -->
                <div class="card" style="overflow: scroll;height: 100%;overflow-y: scroll">
					<div class="custom-card-header quick-bar">
						<div class="hint">&nbsp;</div>
						<@seachpanel.filterbox></@seachpanel.filterbox>
					    <button id="id-export-file" type="button" class="btn btn-dark btn-outline btn-sm m-l-10" title="导出"><i class="fa fa-share-square-o"></i></button>
					</div>
                    <div class="card-body">
                        <div class="head">2024</div>
<!--                       <table id="id-diagram-table" class="table table-bordered content-center m-t-20"  cellspacing="0">-->
<!--                           <thead>-->
<!--                           <tr>-->
<!--                               <th colspan="8">2024</th>-->
<!--                           </tr>-->
<!--                           </thead>-->
<!--                           <thead>-->
<!--                               <tr>-->
<!--                                   <th>单位</th>-->
<!--                                   <th>部门</th>-->
<!--                                   <th>专业</th>-->
<!--                                   <th>岗位</th>-->
<!--                                   <th>ERP编号</th>-->
<!--                                   <th>姓名</th>-->
<!--                                   <th>从事时间最长专业</th>-->
<!--                                   <th>时长</th>-->
<!--                                   <th>从事时间最长岗位-->
<!--                                       <el-button type="danger">Primary Button</el-button>-->
<!--                                   </th>-->
<!--                                   <th>生产岗位工作满3年</th>-->
<!--                                   <th>营销岗位工作满3年</th>-->
<!--                                   <th>荣誉-综合类荣誉</th>-->
<!--                                   <th>荣誉-专业类荣誉</th>-->
<!--                                   <th>荣誉集体类荣誉</th>-->
<!--                                   <th>荣誉-最高荣誉</th>-->
<!--                                   <th>人才称号-系统内</th>-->
<!--                                   <th>人才称号-系统外</th>-->
<!--                               </tr>-->
<!--                           </thead>-->
<!--                        </table>-->
                        <el-table
                                class="export-table"
                                id="id-diagram-table"
                                :data="tableDatas"
                                border
                                :height="750"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="姓名">
                            </el-table-column>
                            <el-table-column
                                    prop="depart"
                                    label="部门"
                                    color="#687e8b"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="job"
                                    label="岗位">
                            </el-table-column>
                            <el-table-column
                                    prop="unit"
                                    label="单位"
                                    width="280">
                            </el-table-column>
                            <el-table-column
                                    prop="career"
                                    label="专业"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="id"
                                    label="ERP编号"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="longCareer"
                                    label="从事时间最长专业"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="year"
                                    label="时长">
                            </el-table-column>
                            <el-table-column
                                    prop="czsjzw"
                                    label="从事时间最长岗位"
                                    width="150"
                                    :filters="getFilters('czsjzw')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="scgwg3n"
                                    label="生产岗位工作满3年"
                                    width="160"
                                    :filters="getFilters('scgwg3n')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="yxgwg3n"
                                    width="160"
                                    label="营销岗位工作满3年"
                                    :filters="getFilters('yxgwg3n')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="ryzhly"
                                    width="160"
                                    label="荣誉-综合类荣誉"
                                    :filters="getFilters('ryzhly')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="ryzyly"
                                    width="160"
                                    label="荣誉-专业类荣誉"
                                    :filters="getFilters('ryzyly')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="ryzyly"
                                    width="160"
                                    label="荣誉集体类荣誉"
                                    :filters="getFilters('ryzyly')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="ryzyly"
                                    width="160"
                                    label="荣誉-最高荣誉"
                                    :filters="getFilters('ryzyly')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="ryzyly"
                                    width="160"
                                    label="人才称号-系统内"
                                    :filters="getFilters('ryzyly')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                            <el-table-column
                                    prop="ryzyly"
                                    width="160"
                                    label="人才称号-系统外"
                                    :filters="getFilters('ryzyly')"
                                    :filter-method="filterHandler">
                            </el-table-column>
                        </el-table>
                    </div>
                 </div>
                <!-- End PAge Content -->
            </div>
            <!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/datatables.min.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/jquery.dataTables.zh-CN.js"></script>
 <script src="${ROOT}/mind/js/vue2.js"></script>
 <link href="${ROOT}/mind/css/element-ui.css" rel="stylesheet">
 <!-- 引入Element Plus的JavaScript -->
 <script src="${ROOT}/mind/js/element-ui.js"></script>
 <script>

 </script>
 <script type="text/javascript">
     new Vue({
         el: '#ceshi_div',
         data() {
             return {
                 tableDatas: [], // 确保这里定义了 tableDatas
                 filterOptions: { // 筛选选项
                     czsjzw: [], // 每个属性对应一个数组，存储筛选项
                     scgwg3n: [],
                     yxgwg3n: [],
                     ryzhly: [],
                     ryzyly: [],
                     // 其他属性...
                 }
                 // 其他数据属性...
             };
         },
         mounted() {
             this.fetchData();
             $.post('${ROOT}/t/treeNav', (data, status) => {
                 if (data.code === "ok") {
                     $.fn.filterBox({
                         data: data.data,
                         onsubmit: (form, data) => {
                             let param = "tp=3";
                             if (data) {
                                 param += "&" + data;
                             }
                             $.post('${ROOT}/t/trendSum', param, (response, status) => {
                                 if (response && response.code === 'ok') {
                                     this.tableDatas = response.data.users; // 使用箭头函数，this 指向 Vue 实例

                                 }
                             }, 'json');
                         }
                     });
                 }
             }, 'json');
         },
         methods: {
             fetchData() {
                 $.post('${ROOT}/t/trendSum', 'tp=3', (data, status) => {
                     if (data && data.code === 'ok') {
                         this.tableDatas = data.data.users;
                         this.setFilterOptions(data.data.users);
                     }
                 }, 'json');
             },
             setFilterOptions(users) {
                 // 根据 users 数据设置筛选选项
                 const uniqueOptions = {}; // 存储去重后的筛选项
                 users.forEach(user => {
                     Object.keys(user).forEach(key => {
                         if (!uniqueOptions[key]) {
                             uniqueOptions[key] = [...new Set(users.map(u => u[key]))];
                         }
                     });
                 });
                 this.filterOptions = uniqueOptions; // 更新 filterOptions
             },
             filterHandler(value, row, column) {
                 const property = column['property'];
                 return row[property] === value;
             },
             getFilters(prop) {
                 return this.filterOptions[prop].map(option => ({
                     text: option,
                     value: option
                 }));
             },
         }
     })
    // word导出事件
     document.getElementById('id-export-file').addEventListener('click', function() {
         // Ensure echarts charts have finished rendering
         setTimeout(() => {
             var charts = document.querySelectorAll('canvas');
             charts.forEach(chart => {
                 var dataURL = chart.toDataURL();
                 var imgTag = '<img src="' + dataURL + '" />';
                 chart.insertAdjacentHTML('beforebegin', imgTag);
                 chart.style.display = 'none'; // Hide the original canvas
             });

             // Create a temporary container for the export
             var exportContainer = document.createElement('div');
             exportContainer.id = 'export-container';
             exportContainer.style.width = '100%';

             // Clone ECharts charts
             // var chartContainer = document.getElementById('id-chart-01').cloneNode(true);
             // exportContainer.appendChild(chartContainer);

             var clonedTable = document.getElementById('id-diagram-table').cloneNode(true);
             clonedTable.setAttribute('class', 'export-table'); // 给克隆的表格添加样式类
             exportContainer.appendChild(clonedTable);

             // Convert the export container's HTML to a Word document
             var htmlHeader = `
        <!DOCTYPE html>
        <html>
        <head>
          <style>
            .export-table {
              width: 100%; /* 设置表格宽度为100% */
              table-layout: fixed
            }
            .export-table th, .export-table td {
              border: 1px solid #000;
              text-align: center;
              border-collapse: collapse;
              padding: 0px 28px; /* 添加一些内边距以改善视觉效果 */
            }
          </style>
        </head>
        <body>`;
             var htmlFooter = `
        </body>
        </html>`;
             var htmlContent = htmlHeader + exportContainer.innerHTML + htmlFooter;

             var blob = new Blob([htmlContent], { type: 'application/msword' });
             var url = URL.createObjectURL(blob);
             var a = document.createElement('a');
             a.href = url;
             a.download = '人才信息定向筛选.doc';
             a.click();
             URL.revokeObjectURL(url);

             // Clean up by removing the temporary container
             exportContainer.remove();

             // Revert changes made to the document for export
             charts.forEach(chart => {
                 chart.previousSibling && chart.previousSibling.remove();
                 chart.style.display = 'block'; // Restore the original canvas
             });
         }, 1000); // Adjust the timeout as needed to ensure charts have rendered
     });

     $(document).ready(function(){

	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/t/team";
		  if(12===val){
			  ctx = "/t/team12";
		  } else if(13===val){
			  ctx="/t/team13"
		  } else if(14===val){
			  ctx="/t/team14"
		  }
		  window.location.href="${ROOT}" + ctx;
	});

	var $table = null;
	var dataToTableView = function(mydata){
		if(!mydata){
			return;
		}

		if($table) {
			$table.fnClearTable();
			$table.fnDestroy();
		}

		$table = $("#id-diagram-table").dataTable({
		    "ordering":false,
		    "searching": false,
		    "bFilter":false,
		    "info": false,
		    "paging": false,
		    'bAutoWidth':false,
		    "bDestroy" : true,
		    "aoColumns": [
		    	{'mData': 'unit', sWidth: '250px', defaultContent: '' },
		    	{'mData': 'depart', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'career', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'job', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'id', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'name', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'longCareer', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'year', sWidth: '100px', defaultContent: '' },
                {'mData': 'czsjzw', sWidth: '', defaultContent: '' },
                {'mData': 'scgwg3n', sWidth: '', defaultContent: '' },
                {'mData': 'yxgwg3n', sWidth: '', defaultContent: '' },
                {'mData': 'ryzhly', sWidth: '', defaultContent: '' },
                {'mData': 'ryzyly', sWidth: '', defaultContent: '' },
                {'mData': 'ryjtlry', sWidth: '', defaultContent: '' },
                {'mData': 'ryzgry', sWidth: '', defaultContent: '' },
                {'mData': 'rctchxtn', sWidth: '', defaultContent: '' },
                {'mData': 'rctchxtw', sWidth: '', defaultContent: '' }
		    ],
		    "data":mydata.users
		});
		$table.fnDraw();
	};

    // 导出事件绑定
    // $('#id-export-file').click(function(){
    // 	var pdfCanvas = $.fn.pdfcanvas({
    // 		title: '人才队伍趋势预警 - 人才信息定向筛选',
    // 		keywords: '单位和部门：；岗位类别：'
    // 	})
    // 	pdfCanvas.addDom(document.getElementById("id-diagram-table"));
    // 	pdfCanvas.print();
    //
    // });

    //初始化过滤面板
    // $.post('${ROOT}/t/treeNav',function(data, status){
    // 	if(data.code==="ok"){
	// 		$.fn.filterBox({
	// 			data: data.data,
	// 			onsubmit: function(form, data){
	// 				var param = "tp=3";
	// 				if(data){
	// 					param = param +"&" + data;
	// 				}
    //
	// 			    $.post('${ROOT}/t/trendSum',param,function(data, status){
	// 			    	if(data&&data.code==='ok') {
	// 			    		this.tableDatas = data.data
	// 			    	}
	// 			    }, 'json');
	// 			}
	// 		})
    // 	}
    // });
    //先提取数据

});
</script>
</@panel.footer>
</#escape>